<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    height: 100vh;
  }
  .ivu-row-flex {
    height: 100vh;
    position: absolute;
    margin-right: 50px;
  }
  .layout-breadcrumb{
    padding: 10px 15px 0;
  }
  .layout-content{
    min-height: 200px;
    margin: 15px;
    overflow: hidden;
    background: #fff;
    border-radius: 4px;
  }
  .layout-content-main{
    padding: 10px;
  }
  .layout-copy{
    padding: 10px 0 20px;
    color: #9ea7b4;
    text-align:center;
  }
  .layout-menu-left{
    background: #464c5b;
    position: fixed;
    overflow: hidden;
    height: 100vh;
  }
  .layout-header{
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
  }
  .layout-logo-left{
    width: 90%;
    height: 30px;
    background: #5b6270;
    border-radius: 3px;
    margin: 15px auto;
  }
  .layout-ceiling-main a{
    color: #9ba7b5;
  }
  .layout-hide-text .layout-text{
    display: none;
  }
  .ivu-col{
    transition: all .2s ease-in-out;
  }
  .layout-text{
    white-space: nowrap;
  }
  .ivu-menu li{
    white-space: nowrap;
    overflow: hidden;
  }
  @media screen and (min-width:500px){
    .layout-content-big{
      width:calc(100vw - 72px);
      margin-left: 70px;
    }
    .layout-content-small{
      width:calc(100vw - 252px);
      margin-left: 252px;
    }
    .layout-menu-left-big{
      width:250px;
    }
    .layout-menu-left-small{
      width:70px;
    }

  }
  @media screen and (max-width:499px){
    .layout-menu-left{
      display: none;
    }
  }
  .layout-header-left{
      line-height: 60px;
      float: left;
      padding: 0px 15px;
  }
  .layout-header-right{
      line-height: 60px;
      float: right;
      padding: 0px 15px;
  }
  .layout-header-user{
    line-height: 60px;
  }
  .layout-header{
    position: fixed;
    transition: width .2s ease-in-out;
  }
  .layout-header-big{
    width:calc(100vw - 72px);
  }
  .layout-header-small{
    width:calc(100vw - 252px);
  }
  .layout-content-box{
    margin-top: 60px;
    width:100%;
    height:calc(100vh - 60px);
    overflow-y: auto;
  }
</style>
<template>
  <div class="layout">
    <Row type="flex">
      <i-col class="layout-menu-left" :class="{'layout-menu-left-small': !layoutExpand , 'layout-menu-left-big': layoutExpand}">
        <Menu  theme="dark" width="auto" :active-name="activeName" :open-names="openNames">
          <div class="layout-logo-left"></div>
          <Submenu :name="item.name" v-if="$auth.check(item.auths)" v-for="item in menuList" :key="item.name" style="width:250px">
            <template slot="title">
              <Icon :type="item.icon" :size="iconSize"></Icon>
              <span v-show="layoutExpand">{{item.title}}</span>
            </template>
            <router-link v-for="itemChild in item.childList" :key="itemChild.name" :to="{ name: itemChild.name }">
              <Menu-item :name="itemChild.name"  v-if="$auth.check(itemChild.auths)" v-show="layoutExpand" >{{itemChild.title}}</Menu-item>
            </router-link>
          </Submenu>
          <template v-once v-if="$auth.user().username != undefined">
            {{menuListFinish()}}
          </template>

        </Menu>
      </i-col>

      <i-col :class="{'layout-content-big': !layoutExpand , 'layout-content-small': layoutExpand}">
        <div class="layout-header" :class="{'layout-header-small': layoutExpand , 'layout-header-big': !layoutExpand}">
          <Button class="layout-header-left" type="text" @click.native="toggleClick()">
            <Icon type="navicon" size="32"></Icon>
          </Button>
          <Button class="layout-header-right" type="text" @click.native="loginOut()">

          </Button>

          <Dropdown style="float:right;">
            <a href="javascript:void(0)" class="layout-header-user">
              <Icon type="person" size="20"></Icon>{{ $auth.user().username }}
              <Icon type="arrow-down-b"></Icon>
            </a>
            <Dropdown-menu slot="list">
              <Dropdown-item>个人信息</Dropdown-item>
              <Dropdown-item>修改信息</Dropdown-item>
              <Dropdown-item @click.native="btn()">修改密码</Dropdown-item>
              <Dropdown-item divided @click.native="$auth.logout()">退出帐号</Dropdown-item>
            </Dropdown-menu>
          </Dropdown>
        </div>
        <div class="layout-content-box">
          <div class="layout-breadcrumb">
            <Breadcrumb>
              <Breadcrumb-item href="#">{{topActiveTitle}}</Breadcrumb-item>
              <Breadcrumb-item>{{activeTitle}}</Breadcrumb-item>
            </Breadcrumb>
          </div>
          <div class="layout-content">
            <div class="layout-content-main">
              <router-view></router-view>
            </div>

          </div>
          <div class="layout-copy">
            2011-2016 &copy; TTT
          </div></div>

      </i-col>
    </Row>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        activeName: "",
        activeTitle:"",
        topActiveTitle:"",
        openNames:[],
        menuList: [
          {
            "icon": "ios-analytics",
            "title": "基础数据管理",
            "name": "1",
            "auths": ["base_auth"],
            "childList": [
              {
                "title": "权限管理",
                "name": "rulesMgtPage",
                "auths": ["base_auth"],
              },
              {
                "title": "帐号管理",
                "name": "accountMgtPage",
                "auths": ["base_auth"],
              }
            ]
          },
          {
            "icon": "ios-analytics",
            "title": "测试管理",
            "name": "2",
            "auths": ["base_auth"],
            "router": "",
            "childList": [
              {
                "title": "测试页面",
                "name": "testPage",
                "auths": ["base_auth"],
              }
            ]
          }

        ],
        layoutExpand : true
      }
    },
    computed: {
      iconSize () {
        return this.layoutExpand ? 14 : 24;
      }
    },
    mounted(){
    },
    prop:{},
    methods: {
      btn(){
        this.axios.post("/role/gridRoleList",{"pageNum":1,"pageSize":10,"sortList":[],"filterList":[],"firstRequest":true}).then(res => {
          console.log('RES', res);
      });
      },
      toggleClick () {
        this.layoutExpand = !this.layoutExpand;
      },
      menuListFinish() {
        let self= this;
        setTimeout(function () {
          for(let item in self.menuList){
               for(let childItem in self.menuList[item]['childList']){
               if(self.menuList[item]['childList'][childItem].name == self.activeName){
                 self.openNames.push(self.menuList[item].name);
                 self.topActiveTitle = self.menuList[item].title;
               }

             }
           }
          self.openNames = ["1"];
          self.activeName = self.$route.name;
        }, 500)
      }
    }
  }
</script>
